<div class="tabPanel" data-dojo-attach-point="createPointContainer">
  
    <div class="controls">
  
        <div class="controlGroup">
          <label>${nls.GRGLayerName}</label>
          <div class="controlItem">
            <input class="jimu-input textInput" data-dojo-type="dijit/form/ValidationTextBox" data-dojo-attach-point="addGRGPointName" 
               data-dojo-props="regExp:'[a-zA-Z0-9_]*', invalidMessage:'${nls.invalidGRGLayerName}', missingMessage:'${nls.missingGRGLayerName}'" required="true"></input>
          </div>
        </div>
        
        <div class="controlGroup">
          <label data-dojo-attach-point="coordInputLabel">${nls.coordInputLabel}</label>
          <div class="controlItem">
              <input class="jimu-input coordInput" data-dojo-attach-point="observerCoords" placeholder="" />
              <div class="controlItem paddedLeft">
                <div class='add-with-icon'>
                  <span title="${nls.formatIconTooltip}" class="jimu-icon jimu-icon-setting" data-dojo-attach-point="coordinateFormatButton"></span>
                </div>
                <div class='add-with-icon'>
                  <div title="${nls.addPointToolTip}" class="draw" data-dojo-attach-point="addPointBtn"></div>
                </div>
              </div>
          </div>
        </div>
        
        <div class="controlGroup">
          <label>${nls.numberOfCells}</label>
          <div class="controlItem">
            <input class="jimu-input dijitNumberTextBoxHalfLeft" data-dojo-type="dijit/form/NumberTextBox" data-dojo-props='constraints:{min:1,places:0},
              invalidMessage:"${nls.invalidNumberMessage}",
              rangeMessage:"${nls.invalidRangeMessage}"' data-dojo-attach-point="pointCellHorizontal" value="5"></input>
            <label style='padding-top: 10px;'>X</label>
            <input class="jimu-input dijitNumberTextBoxHalfRight" data-dojo-type="dijit/form/NumberTextBox" data-dojo-props='constraints:{min:1,places:0},
              invalidMessage:"${nls.invalidNumberMessage}",
              rangeMessage:"${nls.invalidRangeMessage}"' data-dojo-attach-point="pointCellVertical" value="5"></input>
          </div>
        </div>
        
        <div class="controlGroup">
          <label>${nls.gridAngle}</label>
          <div class="controlItem">
            <input data-dojo-type="dijit/form/NumberSpinner" data-dojo-attach-point="gridAnglePoint" value="0" data-dojo-props="intermediateChanges:true, smallDelta:1, constraints:{min:-89,max:89,places:0}"/>
          </div>
        </div>
        
        <div class="controlGroup">
          <label>${nls.cellWidth}</label>
          <div class="controlItem">
            <input class="jimu-input dijitNumberTextBox" data-dojo-type="dijit/form/NumberTextBox" data-dojo-props='constraints:{min:0,pattern: "#0.##############"},
              invalidMessage:"${nls.invalidNumberMessage}",
              rangeMessage:"${nls.invalidRangeMessage}"' data-dojo-attach-point="pointCellWidth" value="1000" ></input>
          </div>
        </div>  
        
        <div class="controlGroup">
          <label>${nls.cellHeight}</label>
          <div class="controlItem">
            <input class="jimu-input dijitNumberTextBox" data-dojo-type="dijit/form/NumberTextBox" data-dojo-props='constraints:{min:0,pattern: "#0.##############"},
              invalidMessage:"${nls.invalidNumberMessage}",
              rangeMessage:"${nls.invalidRangeMessage}"' data-dojo-attach-point="pointCellHeight" value="1000"></input>
          </div>
        </div>
        
        <div class="controlGroup">
          <label>${nls.cellShape}</label>
          <select class="controlSpace" data-dojo-type="dijit/form/Select" data-dojo-attach-point="pointCellShape" >
              <option selected="selected"  value="default">${nls.choiceDefault}</option>
              <option value="hexagon">${nls.choiceHexagon}</option>
          </select> 
        </div>
        
        <div class="controlGroup">
          <label>${nls.cellUnits}</label>
          <select class="controlSpace" data-dojo-type="dijit/form/Select" data-dojo-attach-point="pointCellUnits" >
              <option value="feet">${nls.feet}</option>
              <option value="kilometers">${nls.kilometers}</option>
              <option value="miles">${nls.miles}</option>
              <option value="meters" selected="selected">${nls.meters}</option>
              <option value="nautical-miles">${nls.nauticalMiles}</option>
              <option value="yards">${nls.yards}</option>
          </select> 
        </div>
        
        <div class="controlGroup">
          <label>${nls.labeling}</label>
          <div class="controlItem">
            <select class="controlSpace" data-dojo-type="dijit/form/Select" data-dojo-attach-point="pointLabelStartPosition" >
              <option selected="selected" value="Lower-Left">${nls.lowerLeft}</option>
              <option value="Lower-Right">${nls.lowerRight}</option>
              <option value="Upper-Left">${nls.upperLeft}</option>
              <option value="Upper-Right">${nls.upperRight}</option>
            </select>
            <select class="controlSpace" data-dojo-type="dijit/form/Select" data-dojo-attach-point="pointLabelStyle" >
              <option selected="selected" value="Alpha-Numeric">${nls.alphaNumeric}</option>
              <option value="Alpha-Alpha">${nls.alphaAlpha}</option>
              <option value="Numeric">${nls.numeric}</option>
            </select>
          </div>
        </div> 
    </div>
        
    <div class="buttonContainer">
        <div class='jimu-btn' data-dojo-attach-point='createPointGRGButton'>${nls.createGRGBtn}</div>
        <div class='jimu-btn controlGroupHidden' data-dojo-attach-point='saveGRGPointButton'>${nls.publishGRGBtn}</div>
    </div>  
</div>
